<template>
    <div class="d1">
        <el-form :model="partyInfo.add" :rules="pubFormRules" ref="pubFormRef" label-width="100px">
            <div class="d2">
                <div class="d3">
                    <el-form-item label="漫展标题" prop="title">
                        <el-input maxlength="50" show-word-limit v-model="partyInfo.add.title"
                            placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item label="展出地点" prop="showLocation">
                        <el-input rows="3" show-word-limit maxlength="90" type="textarea"
                            v-model="partyInfo.add.showLocation" placeholder="请输入具体展出地点，最好能在百度地图上标识出来"></el-input>
                    </el-form-item>
                    <el-form-item label="展出日期" prop="showDate">
                        <div class="block">
                            <el-date-picker v-model="partyInfo.add.showDate" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:SS" placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="漫展票价" prop="price">
                        <el-input maxlength="10" type="number" v-model="partyInfo.add.price" placeholder="请输入标题"></el-input>
                    </el-form-item>
                </div>
                <div class="d4">
                    <el-upload ref="uploadImg" class="avatar-uploader" action="/api/party/uploadImg" :show-file-list="true"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :auto-upload=true
                        :on-change="preview" :on-preview="handlePictureCardPreview" :limit=1 :on-remove="handleRemove"
                        :headers="upload.headers">
                        <img v-if="upload.imageUrl" :src="upload.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="upload.dialogVisible">
                        <img width="100%" :src="upload.dialogImageUrl" alt="图片未加载">
                    </el-dialog>
                </div>
            </div>
            <el-form-item label="活动详情" prop="content">
                <!-- 使用 v-model 进行双向的数据绑定 -->
                <quill-editor class="edit-content" v-model="partyInfo.add.content"></quill-editor>
            </el-form-item>
            <div class="d5">
                <button class="btn" @click.prevent="addParty">注册活动</button>
            </div>
        </el-form>
    </div>
</template>
<script>
import { addParty } from '../../api/party.js'
export default ({
    name: 'PartyAdd',
    mounted() {
        if (this.$route.query.info.id != '' || this.$route.query.info.id != null) {
            //表单信息全部置空
            this.partyInfo.add = {}
            this.partyInfo.add = this.$route.query.info
            this.partyInfo.add.content = this.$route.query.content
            this.upload.imageUrl=this.partyInfo.add.poster
        }
        //给图片上传 ，添加头
        this.upload.headers.Authorization = localStorage.getItem("token")
    },
    data() {
        return {
            partyInfo: {
                add: {
                    poster: "https://www.dmoe.cc/random.php",
                    title: '',
                    showDate: '2024-02-13 09:00:00',
                    showLocation: '',
                    price: 60,
                    content: ''
                }
            },
            //--------------
            upload: {
                imageUrl: '',
                dialogImageUrl: '',
                dialogVisible: false,
                headers: {
                    Authorization: ''
                }
            },
            pubFormRules: {
                showLocation: [{ required: true, message: '请输入展出地点', trigger: 'blur' }],
                title: [
                    { required: true, message: '请输入漫展标题', trigger: 'blur' }
                ],
                showDate: [{ required: true, message: '请选择展出日期', trigger: 'blur' }],
                price: [{ required: true, message: '请输入票价', trigger: 'blur' }],
                content: [{ required: true, message: '至少写一个字叭', trigger: 'blur' }]
            }
        }
    },
    methods: {
        handlePictureCardPreview() {
            this.upload.dialogImageUrl = this.upload.imageUrl;
            this.upload.dialogVisible = true;
        },
        handleRemove(file) {
            this.upload.imageUrl = ''
            this.partyInfo.add.poster = ''
        },
        preview(file) {
            // this.$refs.uploadImg.clearFiles()
            this.upload.imageUrl = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess(res, file) {
            //上传成功后，在这里获取 生成的 图片url路径(即res)
            this.upload.imageUrl = res
            this.partyInfo.add.poster = res
        },
        beforeAvatarUpload(file) {
            this.upload.headers.Authorization = localStorage.getItem("token")
            const isJPG = file.type === 'image/jpeg' || 'image/png';
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt10M) {
                this.$message.error('上传图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M;
        },
        //注册漫展活动
        addParty() {
            this.$refs.pubFormRef.validate((valid) => {
                if (valid) {
                    // console.log("haha",typeof this.partyInfo.add.showDate);
                    addParty(this.partyInfo.add).then(res => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            })
                            return;
                        }
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        })
                        //表单信息全部置空
                        this.partyInfo.add = {}
                        //返回漫展列表
                        this.$router.push({
                            path: '/partyMain'
                        })
                    }).catch(error => {
                        this.$message({
                            type: 'error',
                            message: '请求接口出错'
                        })
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: "请填写完整信息！"
                    })
                    return false;
                }
            });
        }
    }
})  
</script>
<style scoped>
.d1 {
    margin: 0 20%;
    border: 1px solid yellow;
    min-height: 600px;

    .d2 {
        display: flex;
        /* background-color: #42a123; */

        .d3 {
            width: 70%;
        }

        .d4 {
            width: 25%;
            margin: 4% 10%;
        }
    }

    .edit-content {
        height: 500px;
        img {
            display: block;
            margin: 0 auto;
            width: 70%;
            text-align: center;
        }
    }

    .d5 {
        text-align: center;

        .btn {
            background-color: transparent;
            border-radius: 5px;
            border: 2px solid purple;
            color: purple;
            /*紫色文字*/
            padding: 10px 20px;
            font-weight: bold;
            position: relative;

            /* 按钮过度，文字颜色过渡动画 */
            transition: all 1s;

            /* 添加溢出隐藏 */
            overflow: hidden;
        }

        /* 伪元素，悬浮遮罩 */
        .btn::before {
            content: '';
            height: 100%;

            position: absolute;
            left: -30px;
            top: 0;
            background-color: purple;
            /*悬浮遮罩颜色修改*/
            /* 添加斜切，元素倾斜 */
            transform: skewX(45deg);

            /* hover效果 */
            width: 0%;
            transition: all 1s;

            /* 降低悬浮遮罩等级 */
            z-index: -1;
        }

        .btn:hover::before {
            width: 180%;
        }

        .btn:hover {
            color: white;
        }
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #2bc6cc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    width: 100%;
    height: 100%;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #42a123;
    width: 200px;
    height: 250px;
    line-height: 178px;
    text-align: center;
    background-color: rgb(83, 61, 193);
}

.avatar {
    width: 200px;
    height: 250px;
    display: block;
}
</style>
